<div id="familiarList">
<table>
        	<thead class="nav">
        		<tr>
        			<td>
        				Nombre y Apellido
        			</td>
        			<td>
        				DNI
        			</td>
        			<td>
        				Fecha de Nacimiento
        			</td>
        			<td>
        				Sexo
        			</td>
        			<td>
        				Parentesco
        			</td>
        			<td>
        				
        			</td>
        		</tr>
        	</thead>
</table>
    <g:each var="familiar" in="${afiliadoInstance.familiars}" status="i">
        
        <!-- Render the familiar template (_familiar.gsp) here -->
        	<g:render template='familiar' model="['familiar':familiar,'i':i,'hidden':false]"/>
        <!-- Render the familiar template (_familiar.gsp) here -->
    </g:each>
</div>
<input type="button" value="Nuevo Familiar" id="addFamiliar" />
<script type="text/javascript">

var childCount = ${afiliadoInstance?.familiars.size()} + 0;

    (function($){
    	   $(function(){
    	      // Run on DOM ready
    	      
    		 //bind click event on delete buttons using jquery live
    	        $('.del-familiar').live('click', function() {
    	            //find the parent div
    	            var prnt = $(this).parents(".familiar-div");
    	            //find the deleted hidden input
    	            var delInput = prnt.find("input[id$=deleted]");
    	            //check if this is still not persisted
    	            var newValue = prnt.find("input[id$=new]").attr('value');
    	            //if it is new then i can safely remove from dom
    	            if(newValue == 'true'){
    	                prnt.remove();
    	            }else{
    	                //set the deletedFlag to true
    	                delInput.attr('value','true');
    	                //hide the div
    	                prnt.hide();
    	            }
    	        }); 
    	   });


    	   $('#addFamiliar').click(function(){   
			   var clone = $("#familiar_clone").clone()
			   var htmlId = 'familiarList['+childCount+'].';
			   var familiarInput = clone.find("input[id$=nombreApellido]");

			   clone.find("input[id$=id]")
			          .attr('id',htmlId + 'id')
			          .attr('name',htmlId + 'id');
			   clone.find("input[id$=deleted]")
			           .attr('id',htmlId + 'deleted')
			           .attr('name',htmlId + 'deleted');
			   clone.find("input[id$=new]")
			           .attr('id',htmlId + 'new')
			           .attr('name',htmlId + 'new')
			           .attr('value', 'true');
			   familiarInput.attr('id',htmlId + 'nombreApellido')
			           .attr('name',htmlId + 'nombreApellido');

			   clone.find("input[id$=dni]")
	           		.attr('id',htmlId + 'dni')
	           		.attr('name',htmlId + 'dni');

			   clone.find("select[id$=sexo]")
	   		        .attr('id',htmlId + 'sexo')
	        		.attr('name',htmlId + 'sexo');
	   
			   clone.find("select[id$=tipo]")
			           .attr('id',htmlId + 'tipo')
			           .attr('name',htmlId + 'tipo');

			   clone.find("input[name$=fechaNacimiento]")
	           		.attr('value','date.struct')
	           		.attr('name',htmlId + 'fechaNacimiento');
			   clone.find("select[id$=fechaNacimiento_day]")
			           .attr('id',htmlId + 'fechaNacimiento_day')
			           .attr('name',htmlId + 'fechaNacimiento_day');
			   clone.find("select[id$=fechaNacimiento_month]")
			           .attr('id',htmlId + 'fechaNacimiento_month')
			           .attr('name',htmlId + 'fechaNacimiento_month');
			   clone.find("select[id$=fechaNacimiento_year]")
			           .attr('id',htmlId + 'fechaNacimiento_year')
			           .attr('name',htmlId + 'fechaNacimiento_year');        

			   clone.attr('id', 'familiar'+childCount);
			   $("#familiarList").append(clone);
			   clone.show();
			   familiarInput.focus();
			   childCount++;

		   });
    	   // Run right away
    	})(jQuery);
    	    
    
</script>



